<template>
<view class="moneyclass">
    <view class="classbox">
        <view class="box" style="background: linear-gradient(-90deg, #0083F2 0%, #00A9F2 100%)">
            <view class="top">订单退款金额（元）</view>
            <view class="bottom">￥{{tuikuanmoney}}</view>
            <view class="right" bindtap="gopath"  data-type="1">
                <view class="icon"
                    style="background-image:url('https://6775-guess-9gpx4635bd56e954-1304086925.tcb.qcloud.la/moneycarone.png?sign=63ab1bf0af89596808b0e3edf4a86f75&t=1608197856')">
                </view>
                <navigator class="tixian" style="color:#0083F2" url="/pages/aliac/aliac">去提现</navigator>
                <view class="icon1"
                    style="background-image:url('https://6775-guess-9gpx4635bd56e954-1304086925.tcb.qcloud.la/moneyone.png?sign=759189214cbf18619f94d3470c4d480d&t=1608197871')">
                </view>
            </view>
        </view>
        <view class="box" style="background: linear-gradient(-90deg, #FF8813 0%, #FFA705 100%)">
            <view class="top">累计收益金额（元）</view>
            <view class="bottom">￥{{dindanmoney}}</view>
            <view class="right" bindtap="gopath"  data-type="2">
                <view class="icon"
                    style="background-image:url('https://6775-guess-9gpx4635bd56e954-1304086925.tcb.qcloud.la/moneycartwo.png?sign=6c7fb0fdc2a449b41d4cef22dee0cfe8&t=1608197884')">
                </view>
                <navigator class="tixian" style="color:#FF8813" url="/pages/aliac/aliac">去提现</navigator>
                <view class="icon1"
                    style="background-image:url('https://6775-guess-9gpx4635bd56e954-1304086925.tcb.qcloud.la/moneytwo.png?sign=bab35bcf4ebd2a808404abff10626e97&t=1608197899')">
                </view>
            </view>
        </view>
    </view>
    <view class="listheader">
        <view class="timesize" bindtap="timeshow">
            <view class="sizeicon"
            :style="{'background-image':
            `url(${show == false?'https://6775-guess-9gpx4635bd56e954-1304086925.tcb.qcloud.la/bottom.png':
            'https://6775-guess-9gpx4635bd56e954-1304086925.tcb.qcloud.la/top.png})'}`}">
            </view>
            <view style="margin:0 20rpx">{{time}}</view>
        </view>
        <view class="typesize" bindtap="typeshow">
            <view style="margin:0 20rpx">全部提现类型</view>
            <view class="sizeicon"
                :style="{'background-image':`url(${typeshow == false?'https://6775-guess-9gpx4635bd56e954-1304086925.tcb.qcloud.la/bottom.png?sign=4729bca2a0a1edd12f1eac75691b4c10&t=1608430737':'https://6775-guess-9gpx4635bd56e954-1304086925.tcb.qcloud.la/top.png?sign=811676a46956f25836ac72d4bda9ca3f&t=1608431548'}`}">
            </view>
        </view>
    </view>
    <view class="list">
        <view class="listbox" >
            <view class="listone"  v-for="(item,index) in list"  :key="index"  @click="go(item)">
                <view class="listtop">
                    <view style="color:#24BF65">{{item.withdarw_type == 1?'订单退款金额提现':'累计收益金额提现'}}</view>
                    <view>{{item.created_at}}</view>
                </view>
             <view class="listright">
                <view class="rightbox">
                    <view :style="{color:item.status!=2? '#24BF65' : '#EE3800'}">{{item.money}}</view>
                    <view>{{item.status ==1?'审核中': item.status ==2?'已提现':item.status==3?'提现取消':item.status==4?'提现拒绝':'提现失败'}}</view>
                </view>
                <image class="tuikuan" src="../../static/img01/right.png"></image>
            </view>
            </view>
            <view v-if="list.length==0" class="tt" >暂无数据</view>
        </view>
    </view>
</view>
</template>

<script>
	export default {
		data() {
			return {
				tuikuanmoney: 0,
				dindanmoney: 0,
                time: "",
                value: 1,
                typeshow: false,
                show: false,
                list: [
                ]
			}
		},
		methods: {
			go(item) {
                uni.navigateTo({
                    url: "/pages/tixianshouyi/tixianshouyi?item="+JSON.stringify(item)
                })
            }
		},
        onShow() {
            let date = new Date();
            this.time = `${date.getFullYear()}-${date.getMonth()+1}`;
            this.$api.checkAccount({uid: true,type:2}).then(res=>{
                this.dindanmoney = res.data.earnings
            });
            this.$api.checkAccount({uid: true,type:1}).then(res=>{
                this.tuikuanmoney = res.data.back_money
            });
            this.$api.withdrawList({uid: true,type:6,date: this.time}).then(res=>{
                this.list = res.data.data
            });
        }
	}
</script>

<style>
/* pages/moneyclass/moneyclass.wxss */
.moneyclass{
  width: 100%;
  height: 100%;
  position: relative;
  background: #f1f1f1;
}
.wa{
  width: 100%;
  height:150rpx;
}
.classbox{
  width: 96%;
  background: #f1f1f1;
  min-height: 600rpx;
  margin: 0 auto;
}
.box{
  width: 100%;
  height: 250rpx;
  padding: 40rpx 30rpx;
  box-shadow: 0px 8px 7px 0px rgba(36, 36, 36, 0.13);
  border-radius: 16px;
  position: relative;
  margin-top: 30rpx;
  box-sizing: border-box;
}
.top{
  font-size: 40rpx;
  color: white;

}
.bottom{
  font-size: 40rpx;
  color: white;
  margin-top: 60rpx;
}
.right{
  width: 220rpx;
  height: 40rpx;
  border-radius: 40rpx;
  background-color: white;
  padding: 20rpx 20rpx;
  position: absolute;
  top: calc(50% - 40rpx);
  right: 30rpx;
  display: flex;
  justify-content: space-around;
}
.tixian{
  margin-bottom: 4rpx;
  font-size: 32rpx;
}
.icon{
  width: 40rpx;
  height: 40rpx;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.icon1{
  width: 44rpx;
  height: 44rpx;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.list{
  width: 100%;
  height: calc(100% - 700rpx);
  background: #fff;
}
.listheader{
  width: 95%;
  height: 80rpx;
  font-size: 30rpx;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  background: #f1f1f1;
  position: relative;
}
.timesize{
  width: 50%;
  height: 40rpx;
  display: flex;
}
.typesize{
  width: 50%;
  height: 40rpx;
  display: flex;
  justify-content: flex-end;
}
.sizeicon{
  width: 30rpx;
  height: 20rpx;
  margin-top: 10rpx;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.sizebox{
  width: 300rpx;
  height: 400rpx;
  background:#fff;
  position: absolute;
  top: 60rpx;
}
.active{
  width: 100%;
  height: 80rpx;
  text-align: right;
  border-bottom: 1px solid #f1f1f1;
  line-height: 80rpx;
}
.typenone{
  width: 250rpx;
  height: 80rpx;
  font-weight: 550;
  border-radius: 10rpx;
  text-align: center;
  color: #555;
  line-height: 80rpx;
  background: #f1f1f1
}
.type{
  width: 250rpx;
  height: 80rpx;
  font-weight: 550;
  border-radius: 10rpx;
  text-align: center;
  color: white;
  line-height: 80rpx;
  background: linear-gradient(-90deg, #0083F2 0%, #00A9F2 100%)
}
.type1{
  width: 250rpx;
  height: 80rpx;
  font-weight: 550;
  border-radius: 10rpx;
  text-align: center;
  color: white;
  line-height: 80rpx;
  background: linear-gradient(-90deg, #FF8813 0%, #FFA705 100%)
}
.listbox{
  width: calc(100% - 60rpx);
  height: auto;
  padding: 0 30rpx;
}
.listone{
  width: 100%;
  height: 80rpx;
  font-size: 28rpx;
  color: #777;
  border-bottom: 1px solid #ccc;
  padding: 20rpx 0;
  display: flex;
  justify-content: space-between;
}
.listtop{
 height: 84rpx;
 width: 50%;
}
.rightbox{
  width: 120rpx;
  margin-right: 20rpx;
}
.tuikuan{
  width: 50rpx;
  height: 50rpx;
  margin-top: 16rpx;
}
.tt{
  text-align: center;
  transform: translateY(30rpx);
}
.listright{
  width: 350rpx;
  height: 84rpx;
  display: flex;
  justify-content: flex-end;
}
.choose{
  width: 100%;
  height: 100rpx;
  font-size: 32rpx;
  line-height: 100rpx;
  text-align: center;
}
.typelist{
  width: 100%;
  height:calc(100% - 100rpx) ;
  display: flex;
  flex-wrap: wrap;
}
.typebox{
  width: 30%;
  height: 70rpx;
  text-align: center;
  line-height: 70rpx;
  background-color: #60cc60;
  border-radius: 10rpx;
  margin: 24rpx 1.6%;
  color: white;
}
.typebox1{
  width: 30%;
  height: 70rpx;
  text-align: center;
  line-height: 70rpx;
  border-radius: 10rpx;
  box-shadow: 0rpx 0rpx 4rpx #999;
  margin: 24rpx 1.6%;
  background-color: white;
  color: #666;
}

</style>
